<!doctype html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>Display labels in timeline cells</title>


	<script src='../../codebase/dhtmlxscheduler.js?v=5.3.10' type="text/javascript" charset="utf-8"></script>
	<script src='../../codebase/ext/dhtmlxscheduler_timeline.js?v=5.3.10' type="text/javascript" charset="utf-8"></script>
	<script src='../../codebase/ext/dhtmlxscheduler_treetimeline.js?v=5.3.10' type="text/javascript" charset="utf-8"></script>

	<link rel='stylesheet' type='text/css' href='../../codebase/dhtmlxscheduler_material.css?v=5.3.10'>

</head>


<style type="text/css" >
	html, body{
		margin:0px;
		padding:0px;
		height:100%;
		overflow:hidden;
	}

	.dhx_matrix_cell div.load-marker{
		position: absolute;
		width: 40%;
		height: 25px;
		transform: translate(70%, 20%);
		line-height: 25px;
		text-align: center;
		border-radius: 7px;
		color: white;
	}

	.load-marker-no{
		background: #e0e0e0;
	}
	.load-marker-light{
		background: #aed581;
	}
	.load-marker-high{
		background: #ff8a65;
	}
</style>

<script type="text/javascript" charset="utf-8">
	function init() {

		scheduler.locale.labels.timeline_tab = "Timeline";
		scheduler.locale.labels.section_custom="Section";
		scheduler.config.details_on_create=true;
		scheduler.config.details_on_dblclick=true;


		//===============
		//Configuration
		//===============

		var elements = [ // original hierarhical array to display
			{key:10, label:"Web Testing Dep.", open: true, children: [
				{key:20, label:"Elizabeth Taylor"},
				{key:30, label:"Managers", open: true,  children: [
					{key:40, label:"John Williams"},
					{key:50, label:"David Miller"}
				]},
				{key:60, label:"Linda Brown"},
				{key:70, label:"George Lucas"}
			]},
			{key:110, label:"Human Relations Dep.", open:true, children: [
				{key:80, label:"Kate Moss"},
				{key:90, label:"Dian Fossey"}
			]}
		];



		scheduler.createTimelineView({
			section_autoheight: false,
			name:	"timeline",
			x_unit:	"minute",
			x_date:	"%H:%i",
			x_step:	30,
			x_size: 24,
			x_start: 16,
			x_length:	48,
			y_unit: elements,
			cell_template: true,
			y_property:	"section_id",
			render: "tree",
			folder_dy:35,
			dy:60
		});

		scheduler.templates.timeline_cell_value = function folderCellContent(evs, date, section){
			if(section.children){
				var timeline = scheduler.getView();

				var events = timeline.selectEvents({
					section: section.key,
					date: date,
					selectNested: true
				});;

				var className = "";
				if(!events.length){
					className = "load-marker-no";
				}else if(events.length < 3){
					className = "load-marker-light";
				}else{
					className = "load-marker-high";
				}

				return "<div class='load-marker "+className+"'>"+
					events.length
					+"</div>";

			}

			return "";
		};


		//===============
		//Data loading
		//===============
		scheduler.config.lightbox.sections=[
			{name:"description", height:50, map_to:"text", type:"textarea" , focus:true},
			{name:"custom", height:30, type:"timeline", options:null , map_to:"section_id" }, //type should be the same as name of the tab
			{name:"time", height:72, type:"time", map_to:"auto"}
		];

		scheduler.init('scheduler_here',new Date(2017,5,30),"timeline");
		scheduler.parse([
			{ start_date: "2017-06-30 09:00", end_date: "2017-06-30 12:00", text:"Task A-12458", section_id:20},
			{ start_date: "2017-06-30 10:00", end_date: "2017-06-30 16:00", text:"Task A-89411", section_id:20},
			{ start_date: "2017-06-30 10:00", end_date: "2017-06-30 14:00", text:"Task A-64168", section_id:20},
			{ start_date: "2017-06-30 16:00", end_date: "2017-06-30 17:00", text:"Task A-46598", section_id:20},

			{ start_date: "2017-06-30 12:00", end_date: "2017-06-30 20:00", text:"Task B-48865", section_id:40},
			{ start_date: "2017-06-30 14:00", end_date: "2017-06-30 16:00", text:"Task B-44864", section_id:40},
			{ start_date: "2017-06-30 16:30", end_date: "2017-06-30 18:00", text:"Task B-46558", section_id:40},
			{ start_date: "2017-06-30 18:30", end_date: "2017-06-30 20:00", text:"Task B-45564", section_id:40},

			{ start_date: "2017-06-30 08:00", end_date: "2017-06-30 12:00", text:"Task C-32421", section_id:50},
			{ start_date: "2017-06-30 14:30", end_date: "2017-06-30 16:45", text:"Task C-14244", section_id:50},

			{ start_date: "2017-06-30 09:20", end_date: "2017-06-30 12:20", text:"Task D-52688", section_id:60},
			{ start_date: "2017-06-30 11:40", end_date: "2017-06-30 16:30", text:"Task D-46588", section_id:60},
			{ start_date: "2017-06-30 12:00", end_date: "2017-06-30 18:00", text:"Task D-12458", section_id:60}
		]);
	}

</script>

<body onload="init();">
	<div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%;'>
		<div class="dhx_cal_navline">
			<div class="dhx_cal_prev_button">&nbsp;</div>
			<div class="dhx_cal_next_button">&nbsp;</div>
			<div class="dhx_cal_today_button"></div>
			<div class="dhx_cal_date"></div>
			<div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
			<div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
			<div class="dhx_cal_tab" name="timeline_tab" style="right:280px;"></div>
			<div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
		</div>
		<div class="dhx_cal_header">
		</div>
		<div class="dhx_cal_data">
		</div>
	</div>
</body>